Grafiktheorie
3D
Bei 2D-Zeichenfunktionen, wie z.B. drawTriangle(x0:int, y0:int, x1:int, y1:int, x2:int, y2:int), kann man direkt mit Pixelkoordinaten arbeiten. In einer 3D-Welt ist dies nicht mehr möglich, da Objekte auf dem Bildschirm kleiner erscheinen, je weiter sie entfernt sind. Das bedeutet, dass zwei gleich große Objekte nicht unbedingt die gleiche Größe auf dem Bildschirm haben. Daher verwenden wir für alle 3D-Zeichnungen ein eigenes Koordinatensystem, in dem alle Entfernungen als Meter interpretiert werden und der Ursprung im Zentrum liegt.
Bei 3D-Zeichnungen gibt es drei Koordinatenrahmen, die wichtig sind: Der feste Weltrahmen, der aktuelle Zeichnungsrahmen und der Kamerarahmen. Standardmässig ist der Weltrahmen ein rechtshändiges System, bei dem die x-Achse nach rechts, die y-Achse nach oben und die z-Achse aus dem Bildschirm heraus in Richtung des Benutzers zeigt.
Die Kamera befindet sich ursprünglich an der Position (x=0, y=0, z=5) und blickt gerade nach unten. Die x-, y-und z-Achse zeigen in dieselbe Richtung wie das Weltbild (wie in der obigen Abbildung dargestellt). Der aktuelle Zeichnungsrahmen befindet sich standardmäßig auf dem Weltrahmen.
Ein 3D-Objekt wird also (ohne vorgängige translate- oder rotate-Funktion) in der mitte des Bildschirms gezeichnet, 5 Meter von der Kamera entfernt.
Wie funktioniert das Zeichnen?
Zum Zeichnen auf dem Bildschirm, stehen verschiedene, sehr leistungsfähige Zeichnungsbefehle zur Verfügung. Es gibt Befehle für Punkte, Linien, Kreise, Ellipsen, Dreiecke, Rechtecke und (allgemeine) Vierecke.
Alle Befehle benötigen einen Ursprungskoordinate (x,y) und meistens noch zusätzliche Angaben, z.B. den Radius beim Kreis, die Breite und Höhe bei einem Rechteck etc.
Der minimale Aufbau einer Zeichnung benötigt drei Zeilen Code.
Beispiel:
background(0,0,0)
drawCircle(120,120,50)
update()
Die erste Zeile füllt den Hintergrund mit scharz.
Die zweite Zeile zeichnen einen Kreis mit einem Radius von 50 Pixel an der Positon x = 120 und y = 120.
Die dritte Zeile aktualisiert die Anzeige. Erst mit dem update()-Befehl werden die Zeichnungsbefehle sichtbar!
Neben der Hintergrundfarbe, kann auch die Kontur- und Füllfarbe bestimmt werden. Mehr hierzu unter “Wie kann ich die Farben ändern?”
Zudem lässt die Zeichnungsfläche auf verschiedene Arten manipulieren: Verschiebung des Nullpunkts, rotieren des Bildes um den (neuen) Nullpunkt, Skalieren (vergrössern/verkleinern).
Mehr hierzu unter “Koordinatensystem” und “Koordinatentransformation”.
Farbräume /-Systeme
Farben werden auf Computerbildschirmen aus den drei unterschiedlich stark leuchtenden Grundfarben rot, grün und blau gemischt. Die einzelnen Werte werden in einer Werteskala von 0 bis 255 angegeben. D.h. theoretisch sind 255 x 255 x 255 = ca. 16 Mio Farben möglich. Physikalisch kann die Oxocard allerdings nur 65’536 effektive Farben darstellen. Hierbei ist schwarz die Kombination r=0,g=0,b=0, und weiss r=255,g=255,b=255.
Es gibt verschiedene Klassifizierungssysteme für Farben. Umgangsprachlich haben verschiedene Farben beispielsweise bestimmte Namen, z.B. Türkisblau, Hellrosa, Tomatenrot, Kiwigrün etc. In der Computerwelt nutzt man Farbräume bzw- Systeme. Wir nutzen auf der Oxocards zwei gängige Systeme:
- das RGB-System und
- das HSV-System
Beim RGB-System werden die drei Farbteile für rot, grün und blau wie oben beschrieben mit je einer Zahl zwischen 0 und 255 angegeben. Dieses System ist auch in Grafikprogramm oder auf Webseiten stark vertreten. Es gibt verschiedene Tools auf dem Internet, wo man sich den Farbcode einer gewünschten Farbe ermitteln kann.
Die möglichen Farbwerte für rot, grün und blau stellt as folgende Bild dar:
Bei HSV-System haben wir drei andere Werte, Hue (H), Saturation (S) und Value (Helligkeit).
Hue ist der Farbwert. Im Original-Hue-System ist dieser Wert auf einem Kreis angeordnet und die Eingabe entspricht einem Wert zwischen 0 und 360 Grad. Auf der Oxocard haben den Wertebereit aus Effizienzgründen ebenfalls auf 0 bis 255 begrenzt. Die entsprechenden Farbwerte kann man hier entnehmen:
Saturation ist ein Wert zwischen 0 und 255 und gibt die Sättigung der Farbe an. 255 bedeutet, dass die Farbe sehr stark ausgeprägt ist. Je geringer der Wert, desto grauer wir die Farbe. “0” entspricht also einem Grauwert. Der dritte Wert “Value” bestimmt die Helligkeit zwischen 0 (sehr dunkel) und 255 (sehr hell).
Auch mit diesem System kann man im Prinzip alle verfügbaren Farben, wie im RGB-System generieren.
Mit dem HSV-System lassen sich sehr einfach schöne Farbübergabe produzieren, da man nur die Helligkeit oder der Stärke eines fixen Hue-Wertes abhändern muss.
Beispiel:
noStroke()
for i in 24:
fillHSV(80,255,i*10)
drawRectangle(0,i*10,240,10)
update()
push
push() und pop()
Die Funktion “push()” speichert sich alle aktuellen Stil- Konfigurationen und Koordinatentransformationen. Mit “pop()” kann man dann wieder zum Originalzustand (vor push()) zurückkehren.
Beispiel:
fill(255,0,0) # setze die Füllfarbe auf rot
translate(120,120) # neuer Nullpunkt ist bei 120,120
push() # wir speichern uns den Zustand
fill(0,255,0) # setze Füllfarbe auf blau
drawRectangle(-50,-50,100,100) # blaues Rechteck
pop() # wir setzen den Zustand wieder zurück (vor push())
drawCircle(0,0,30) # roter Kreis
update() # ausgeben
Koordinatentransformation
Grundsätzlich ist der Nullpunkt im Koordinatensystem oben links. Dies kann aber geändert werden. Dies nennt man Koordinatentransformation. Neben der Änderung des Nullpunkts, kann die Zeichenfläche auch rotiert und skaliert (vergrössert/verkleinert) werden.
Beispiel:
translate(120,120)
rotate(PI/6) # 30 Grad
stroke(255,0,0)
strokeWeight(2)
drawLine(0,0,120,0)
update()
Zeile 1 transformiert den Nullpunkt in die Mitte des Bildes (Abbildung, 2. Skizze).
Zeile 2 rotiert nun am neuen Nullpunkt die Zeichnfläche um 30 Grad im Uhrzeigersinn (PI2 ist der Gesamtekreisumfang, PI2/12 = PI/6 entspricht 30 Grad).
Die 4. Skizze der Abbildung zeigt das Endergebnis: die rote Linie wird von der Bildmitte her gezeichnet (translate(…)) und wird um dreissig Grad rotiert (rotate(…)).
Wie kann ich die Farben ändern?
Wie beim normalen Zeichnen auf Papier, muss man in NanoPy vor dem Zeichnen jeweils festlegen, mit welcher Farbe man arbeiten möchte. Farben lassen sich auf für drei Zeichnungsfunktionen festlegen:
background(r,g,b) oder backgroundHSV(h,s,v) bestimmen die Hintergrundfarbe des Bildschirms. Beim Aufruf dieses Befehles wird der gesamte Hintergrund mit der angegebenen Farbe gefüllt.
fill(r,g,b) oder fillHSV(h,s,v) bestimmt die Füllfarbe. Wenn man ein Rechteck, Kreis, etc. zeichnet, wird das Objekt in der Farbe gefüllt, die man hier angibt. Wenn man das Objekt NICHT füllen möchte, ist die Funktion “noFill()” aufzurufen.
stroke(r,g,b) oder strokeHSV(h,s,v) bestimmt die Strichfarbe. Man kann bei allen Zeichnungsfunktionen bestimmen, ob man diese nur mit eine Kontur versieht oder zusätzlich noch füllt. Man kann die Kontur auch weglassen, in dem man den Befehl “noStroke()” aufruft.
Mehr Information zu den Farben unter “Farbräume und -systeme”.
Koordinatensystem
Der Bildschirm der Oxocard nutzt ein kartesisches Koordinatensystem mit einer horizontalen x- und einer vertikalen y-Achse. Im Gegensatz zur Mathematik, ist der Ursprung bei Bildschirmen in der Regel oben links und nicht unten links.
